import React from 'react';
import { apiPrefix } from 'shared/api';
import { Link } from 'react-router-dom';
import Axios from 'axios';
import './index.less';

class CertificateManageShow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showCertificate: [],
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}api/v1/certificate/certificates?user_id=${this.props.match.params.id}`;
    Axios.get(api)
      .then((response) => {
        console.log(response.data.data);
        this.setState({ showCertificate: response.data.data });
      });
  }

  render() {
    const { showCertificate } = this.state;
    console.log(showCertificate);

    return (
      <div className="content">
        <div>
          <h3>
            持证管理
            <Link to="/Certificate/CertificateManage" className="green-button">
              返回
            </Link>
          </h3>
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>证书名称</th>
                <th>证书等级</th>
                <th>首次取证时间</th>
                <th>取证时间</th>
                <th>证书编号</th>
                <th>到期时间</th>
                <th>状态</th>
                <th>
                  <Link to="/" className="addButton">登记证书</Link>
                </th>
              </tr>
            </thead>
            <tbody>
              {
                showCertificate.map((value, index) => (
                  value.certificates.map((val, ind) => (
                    <tr key={ind}>
                      <td>{ind + 1}</td>
                      <td>{val.fullname}</td>
                      <td>{val.level}</td>
                      <td>{val.first_mfd_date}</td>
                      <td>{val.mfd_date}</td>
                      <td>{val.number}</td>
                      <td>{val.exp_date}</td>
                      <td><span className={value.show_state || 'expire'}>{val.show_state ? '已过期' : '未过期'}</span></td>
                      <td>
                        <Link className="sure-button" to={`/Certificate/CertificateShowFrom/${val.id}`}>修改</Link>
                      </td>
                    </tr>
                  ))

                ))
              }
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default CertificateManageShow;
